$(function () {
    // 获取标签
    label_re()
    let label_info = [];
    let label_list = $('#label_list')
    function label_re() {
        $.ajax({
            type: 'GET',
            url: 'http://127.0.0.1:7300/mock/5ee7242cb1a45736b4181f4a/dog/label',
            success: function (msg) {
                // console.log(msg.data);
                label_info = msg.data
                w_label_list()
            },
            error: function (error) {
                console.log(error.responseText);
            }
        })
    }
    // 清空标签
    function del_label_list() {
        label_list.html("")
    }
    //加载标签
    function w_label_list() {
        for (i in label_info) {
            label_list.append(`
            <li class=" bg-dark text-white list-inline-item" style="margin:1rem">
                            <div class="card-body">
                                <span>`+ label_info[i].l_name + `</span>
                                <a href="#"  class="text-white del_label" style="font-size: 22px;margin:0 0 0 2rem;">x</a>
                            </div>
                        </li>
            `)
        }
        del_label()

    }
    //删除标签
    let del_labelFun = undefined

    function del_label() {
        if (del_labelFun != undefined) {
            $('.del_label').unbind('click', del_labelFun)
            del_labelFun = undefined
        }
        $('.del_label').bind('click', del_labelFun = function () {
            let the_label = $(this).siblings().text()
            $.ajax({
                type: 'GET',
                url: 'http://127.0.0.1:7300/mock/5ee7242cb1a45736b4181f4a/dog/delete?label='+the_label,
                success: function (msg) {
                    for (i in label_info) {
                        if (the_label == label_info[i].l_name) {
                            label_info.splice(i, 1)
                            del_label_list()
                            w_label_list()
                        }
                    }
                    alert(msg.data.result)
                },
                error: function (error) {
                    console.log(error.responseText);

                }
            })
        })

    }
    // 添加标签

    $('#add_label_btn').click(function () {
        let type = 1//状态值 
        let new_label = $('#add_label_text').val()
        if (new_label != "") {
            for (i in label_info) {
                type = 1
                if (label_info[i].l_name == new_label) {
                    alert("请勿重复添加标签")
                    type = 0
                    break
                }
            }
            console.log(type);
            add_label(new_label, type)
        } else {
            alert("请勿提交空标签名")
        }
        function add_label(text, type) {
            if (type != 0) {
                $('#add_label_text').val("")
                $.ajax({
                    type: 'GET',
                    url: 'http://127.0.0.1:7300/mock/5ee7242cb1a45736b4181f4a/dog/adduser?label='+text,
                    success: function (msg) {
                        alert(msg.data.result)
                        label_info.push({ l_name: text })
                        console.log(label_info);
                        del_label_list()
                        w_label_list()
                    },
                    error: function (error) {
                        console.log(error.responseText);

                    }
                })

            }
        }
    })


    function alert(msg) {
        let mo = `
        <div class="modal fade show modal_alert"  style="display: block; padding-right: 17px;" aria-modal="true" >
                                <div class="modal-dialog modal-lg" style="">
                                    <div class="modal-content" style="">
                                        <!-- 模态框头部 -->
                                        <div class="modal-header">
                                            <h4 class="modal-title">提示</h4>
                                            <button type="button" class="close" data-dismiss="modal">×</button>
                                        </div>
                                        <!-- 模态框主体 -->
                                        <div class="modal-body" style="">
                                           `+ msg + `
                                            </div>
                                            <!-- 内容栏目结束 -->
                                            <!-- 模态框底部 -->
                                            <div class="modal-footer">
                                                <button class="col-md-3 border bg-light alert_close" style="height: 50px;" data-dismiss="modal">确定</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>`
        $('body').append(mo)

        $('.alert_close').click(
            function () {
                $('.modal_alert').removeClass('show').css('display', 'none')
            }
        )
    }
})